<template>
  <div class="entry-list-container">
    <ClientOnly>
      <!-- 数据列表 start-->
      <div v-if="dataList.length" class="entry-list-wrap">
        <div class="column-container">
          <div v-for="item in dataList" :key="item.id">
            <a :href="`/columns/${item.id}`" target="_blank"
               class="column-link column">
              <div class="column-wrap">
                <img
                :src="item.thumbImage"
                :alt="item.name" class="column-img">
                <div class="column-right">
                  <div class="first-line">
                    <span class="title">
                      {{item.name}}
                    </span>
                    <OperateDropdown :options="options" @operation="operation($event, item)"></OperateDropdown>
                  </div>
                  <span class="content">
                    {{item.description}}
                  </span>
                  <div class="infos">
                    <span>
                      {{$moment.utcTransLocaleDate(item.updateTime)}}
                    </span>
                    <span>
                      ·
                    </span>
                    <span>
                      文章数
                      {{item.articleCount}}
                    </span>
                    <span>·</span>
                    <span>
                      订阅人数
                      {{item.followerCount}}
                    </span>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <NEmpty v-else :description="NO_DATA_FOUND_TEXT"/>
      <!-- 数据列表 end-->
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
  import {NO_DATA_FOUND_TEXT} from '~/common/constants'
  defineProps({
    dataList: {
      type: Array,
      require: true
    }
  })
  const options = [
    {
      label: '管理内容',
      type: 'management',
      key: '0'
    },{
      label: '修改介绍',
      type: 'edit',
      key: '1'
    },
    {
      label: '置顶专栏',
      type: 'top',
      key: '2'
    },{
      label: '删除',
      type: 'delete',
      key: '3'
    }
  ]
  const emits = defineEmits(['operation'])
  const operation = (e, item) => {
    emits('operation', {
      type: options.find(i => i.key === e).type,
      id: item.id
    })
  }
</script>

<style scoped lang="scss">
  .column-container {
    background: #fff;

    .column-link {
      display: block;
    }

    a {
      text-decoration: none;
      cursor: pointer;
      color: #909090;
    }

    .column-wrap {
      display: flex;
      align-items: flex-start;
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;

      .column-img {
        padding: 16px 0;
        width: 150px;
        height: 84px;
        border-radius: 2px;
      }

      .column-right {
        position: relative;
        padding: 16px 0;
        width: calc(100% - 166px);
        margin-left: 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e6eb;

        .first-line {
          display: flex;
          word-break: break-all;
          align-items: center;

          .title {
            vertical-align: middle;
            display: inline-block;
            flex: auto;
            font-size: 16px;
            line-height: 24px;
            color: #1d2129;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
          }
        }

        .content {
          max-width: 450px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          /*max-width: 90%;*/
          color: #4e5969;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          margin: 8px 0;
        }

        .infos {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #86909c;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }
      }
    }
  }
</style>
